<script setup>
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
import data from "@/untils/address/states.json"
const formLabelWidth = '100px'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Decrypt, Encrypt } from '../../untils/passjs/security';
import { AddAdminData, getRoledata, updateadmin, getRoledataList } from '../../api/api';
let formRef = ref(null)
let props = defineProps({
    dialogFormVisibleDetail: Boolean,
    formlist: Object,
    changeType: String
})
watchEffect(() => {

})
onMounted(() => {
})

let emits = defineEmits(["closeDeatil", 'update:formlist'])
function closedialog(formEl) {
    if (!formEl) return
    emits("closeDeatil")
}
function colseclosedet(formRef) {
    console.log(props.dialogFormVisibleDetail);
    emits("closeDeatil")
}
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="dialogFormVisibleDetail" style="padding: 40px;" title="detail" @close="colseclosedet">
            <el-form :model="formlist" ref="formRef" class="two-column-form">
                <div class="form-row">
                    <!-- 操作人名称 -->
                    <el-form-item label="operator:" :label-width="formLabelWidth" prop="operName">
                        {{ formlist.operName }}
                    </el-form-item>
                    <!-- 操作人类型 -->
                    <el-form-item label="OperatorType:" :label-width="formLabelWidth" prop="operatorType">
                        {{ {
                            0: 'SuperAdmin', 1: 'Administrator User', 2: 'Distributor User', 3: 'End User',
                        }[formlist.operatorType] }}
                    </el-form-item>
                </div>
                <div class="form-row">
                    <!-- 标题 -->
                    <el-form-item label="title:" :label-width="formLabelWidth" prop="title">
                        {{ formlist.title }}
                    </el-form-item>
                    <!-- 操作日志类型 -->
                    <el-form-item label="type:" :label-width="formLabelWidth" prop="optType">
                        {{ {
                            0: 'unknown', 1: 'query', 2: 'add', 3: 'edit', 4: 'delete', 5: 'reset', 6: 'authorize', 7:
                                'revoke', 8: 'import', 9:
                                'export', 10: 'clear', 11: 'push', 12: 'report', 13: 'binding'
                        }[formlist.optType] }}
                    </el-form-item>
                </div>
                <div class="form-row">
                    <!-- ip -->
                    <el-form-item label="ip:" :label-width="formLabelWidth" prop="operIp">
                        {{ formlist.operIp }}
                    </el-form-item>
                    <!-- location -->
                    <el-form-item label="location:" :label-width="formLabelWidth" prop="operLocation">
                        {{ formlist.operLocation }}
                    </el-form-item>

                </div>
                <div class="form-row">
                    <!-- 方法 -->
                    <el-form-item label="method:" style="width: 100%;" :label-width="formLabelWidth" prop="method">
                        <span class="method-text">
                            {{ formlist.method }}
                        </span>
                    </el-form-item>
                </div>
                <div class="form-row">
                    <!-- url -->
                    <el-form-item label="url:" style="width: 100%;" :label-width="formLabelWidth" prop="operUrl">
                        <span class="method-text">
                            {{ formlist.operUrl }}
                        </span>
                    </el-form-item>
                </div>
                 <div class="form-row">
                    <!-- 参数 -->
                    <el-form-item label="param:" style="width: 100%;" :label-width="formLabelWidth" prop="operParam">
                        <span class="method-text">
                            {{ formlist.operParam }}
                        </span>
                    </el-form-item>
                </div>
                <div class="form-row">
                     <!-- 请求方法 -->
                    <el-form-item label="requestmethod:" :label-width="formLabelWidth" prop="requestMethod">
                        {{ formlist.requestMethod }}
                    </el-form-item>
                    <!-- 状态 -->
                    <el-form-item label="status:" :label-width="formLabelWidth" prop="status">
                        {{ {
                            0: 'success', 1: 'fail'
                        }[formlist.status] }}
                    </el-form-item>
                </div>
                 <div class="form-row">
                     <!-- 耗时 -->
                    <el-form-item label="timeConsuming:" :label-width="formLabelWidth" prop="costTime">
                        {{ formlist.costTime + 'ms' }}
                    </el-form-item>
                    <!-- 时间 -->
                    <el-form-item label="time:" :label-width="formLabelWidth" prop="operTime">
                        {{ formlist.operTime }}
                    </el-form-item>
                </div>
                <div class="form-row" >
                    <!-- 结果 -->
                    <el-form-item label="message:" style="width: 100%;" :label-width="formLabelWidth" prop="jsonResult" v-if="formlist.status == 0">
                        <span class="method-text">
                            {{ formlist.jsonResult }}
                        </span>
                    </el-form-item>
                    <el-form-item label="errormessage:" style="width: 100%;" :label-width="formLabelWidth" prop="errorMsg" v-else>
                        <span class="method-text">
                            {{ formlist.errorMsg }}
                        </span>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
.two-column-form .form-row {
    display: flex;
    justify-content: space-between;
}

.method-text {
      word-break: break-all;
    // word-wrap: break-word;
}
:deep(.el-form-item__label) {
  color: #333; /* 更深的颜色 */
}
.two-column-form .el-form-item {
    width: 48%;
}

.address-container {
    display: flex;
    align-items: center;
}

/* 调整表单标签宽度 */
.two-column-form :deep(.el-form-item__label) {
    width: 80px;
    text-align: right;
    padding-right: 12px;
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .two-column-form .form-row {
        flex-direction: column;

        .el-form-item {
            width: 100%;
        }
    }

    .address-container {
        flex-direction: column;
        align-items: flex-start;

        .el-select {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 10px;
        }
    }
}
</style>